<template>
  <div>
    <!-- 这些是样式，可自定义 -->
    <el-menu
      background-color="white"
      text-color="#3C3C3C"
      active-text-color="#4d94dc"
      class="menu el-menu-vertical-menu"
    >
      <!-- 循环菜单数据 -->
      
      <label v-for="item in menuData" :key="item.treemenu.mid">
        <router-link :to="item.treemenu.murl" tag="span" v-if="item.treemenu.murl!==undefined">
        <!-- 判断是否有子菜单，如果有就创建submenu，没有就创建menu-item -->
        <el-submenu :index="item.treemenu.mid+''" v-if="item.children!==undefined && item.children.length>0">
          <template slot="title">
            <i :class="item.icon"></i>
          <span>{{ item.treemenu.mname }} </span>
          </template>
          <label>
            <!-- 自己调用自己 -->
            <menutree :menuData="item.children">
              <span>{{ item.treemenu.mname }}</span>
            </menutree>
          </label>
        </el-submenu>
        <el-menu-item v-else :index="item.treemenu.mid+''">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.treemenu.mname }}</span>
          </template>
        </el-menu-item>
        </router-link>
      </label>
    </el-menu>
  </div>
</template>

<script>
import menutree from "@/components/MenuTree.vue";
export default {
  name: "menutree",
  components: {
    menutree,
  },
  props: {
    menuData: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style scoped>
.menu {
  width: 194px !important;
  
  background-color: #f3fbfe;
  border-radius: 0.1rem;
  margin: 0 0 0 0.4rem;
  margin-bottom: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  position: relative;
}
</style>
